<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { useWarrantyCategoryForm } from './services'
  import { FormInstance } from 'element-plus'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import infoTip from '@/config/info-tip'

  const { form, formSaveLoading, setFormLoading, setForm, formSave, resetForm } =
    useWarrantyCategoryForm()

  const props = defineProps({
    warrantyCategoryId: {
      type: String,
      default: () => '',
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
    (e: 'close'): void
  }>()

  defineOptions({
    name: 'OrderWarrantyCategoryFormModal',
  })

  // 弹窗显示状态
  const visible = defineModel('modelValue', { type: Boolean, default: false })

  // 表单验证规则
  const rules = ref({
    name: [{ required: true, message: '请输入类别名称', trigger: ['change', 'blur'] }],
  })

  // 表单组件实例
  const formInsatnce = ref<FormInstance | null>(null)

  /**
   * 隐藏弹窗
   */
  const hideDialog = () => {
    visible.value = false
    resetForm()
    emits('close')
  }

  /**
   * 确定事件
   */
  const onConfirm = async () => {
    if (!formInsatnce.value) {
      return
    }

    try {
      await formInsatnce.value.validate()
      const res = await formSave()
      if (res.code === 20000) {
        HMessage.success(props.warrantyCategoryId ? '修改类别成功' : '新增类别成功')
        hideDialog()
        emits('update')
        return
      }

      HMessageBox.error(infoTip.order.warranty_category.create[res.code] || res.message)
    } catch (error) {
      // error
    }
  }

  watch(visible, (value) => {
    if (value && props.warrantyCategoryId) {
      setForm(props.warrantyCategoryId)
    }
  })
</script>

<template>
  <h-dialog
    v-model="visible"
    :loading="formSaveLoading || setFormLoading"
    :title="props.warrantyCategoryId ? '编辑类别' : '添加类别'"
    @close="hideDialog"
  >
    <el-form
      ref="formInsatnce"
      :model="form"
      class="modal_form_content"
      inline-message
      label-position="top"
      :rules="rules"
    >
      <!-- 类别名称 -->
      <el-form-item label="类别名称" prop="name">
        <el-input v-model.trim="form.name" placeholder="请输入类别名称" maxlength="30" />
      </el-form-item>

      <!-- 类型 -->
      <el-form-item v-if="!props.warrantyCategoryId" label="类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择类型">
          <el-option :value="1" label="保内"></el-option>
          <el-option :value="2" label="保外"></el-option>
        </el-select>
      </el-form-item>

      <div class="grid grid-column-2">
        <!-- 是否审核 -->
        <el-form-item label="是否审核" class="same_line">
          <el-radio-group v-model="form.checked">
            <el-radio :value="true" size="small">是</el-radio>
            <el-radio :value="false" size="small">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 是否收费 -->
        <el-form-item label="是否收费" class="same_line">
          <el-radio-group v-model="form.collectFee">
            <el-radio :value="true" size="small">是</el-radio>
            <el-radio :value="false" size="small">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>

      <div class="grid grid-column-2">
        <!-- 状态 -->
        <el-form-item label="状态" class="same_line">
          <el-radio-group v-model="form.status">
            <el-radio :value="false" size="small">启用</el-radio>
            <el-radio :value="true" size="small">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 是否为默认 -->
        <el-form-item label="是否为默认" class="same_line">
          <el-radio-group v-model="form.defaultSelect">
            <el-radio :value="true" size="small">是</el-radio>
            <el-radio :value="false" size="small">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <h-button type="primary" is-modal @click="onConfirm">确定</h-button>
      <h-button is-modal @click="hideDialog">取消</h-button>
    </template>
  </h-dialog>
</template>
